<template>
  <el-container>
    <!--  -->
    <el-header>
      <div>
        <img class="logo" src="../assets/images/timg.jpg" alt="logo">
        <span>后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button></el-header>
    <el-container>
      <!--侧边栏-->
        <el-aside  :width="flag?'64px':'200px'">
          <div class="toggle-btn" @click="toggleAside">|||</div>
          <!--侧边栏菜单-->
          <el-menu :collapse="flag" :collapse-transition="false" background-color="#333744" 
          text-color="#fff" active-text-color="#409eff" unique-opened router :default-active="defaultActivedPath">
            <!--一级菜单-->
            <el-submenu v-for="item in menuList" :key="item.id" :index="item.id + ''">
              <template slot="title">
                <i :class="'iconfont icon-'+iconsList[item.id]"></i>
                <span>{{item.authName}}</span>
              </template>
              <!--二级菜单-->
              <el-menu-item :index="'/'+subitem.path+''" v-for="subitem in item.children" :key="subitem.id">
                <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{subitem.authName}}</span>
              </template>
              </el-menu-item>
            </el-submenu>
            <el-submenu :index="9 + ''">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>地图</span>
              </template>
              <!--二级菜单-->
              <el-menu-item index="/map">
                <template slot="title">
                <i class="el-icon-menu"></i>
                <span>百度地图</span>
              </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!--占位符-->
          <router-view class="mainbox"></router-view>
        </el-main>
    </el-container>
    </el-container>
</template>

<script>
import Fetchjsonp from 'fetch-jsonp'
export default {
  data() {
    return {
      //左侧菜单数据
      menuList:[],
      iconsList:{125:'user',103:'tijikongjian',101:'shangpin',102:'danju',145:'baobiao'},
      flag:false,
      defaultActivedPath:''
    }
  },
  created() {
    this.getData();
    console.log(this.$router.history.current.path);
    this.defaultActivedPath = this.$router.history.current.path;
    console.log(this.defaultActivedPath)
  },
  methods: {
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    async getData() {
      const {data:res} = await this.$http.get('menus');
      console.log(res)
      if(res.meta.status != 200) return this.$message.error('菜单数据请求失败，请检查网络');
      this.menuList = res.data;
      /* this.$http.get('../../menus.json').then(response => {
        //console.log(response.data.res);
        this.menuList = response.data.res;

      }, err => {
        this.$message.error('菜单数据请求失败，请检查网络')
        }); */
    },
    toggleAside(){
      this.flag = !this.flag;
    }
  },
  components: {}
}
</script>

<style lang='less' scoped>
.el-container{
  height: 100%;
}

.el-menu{
  border-right: none;
  
}

.mainbox{
  margin: 20px;
}

.el-header{
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color:white;
  font-size: 20px;

  div{
    display: flex;
    align-items: center;
    span{
      margin: 10px 10px;
    }
    .logo{
      width:60px;
      height: 60px;
      border-radius: 50%;
    }
  }
}

.el-aside{
  background-color: #333744;
}

.el-main{
  background-color: #eaedff;
  padding: 0px !important;
}

.toggle-btn{
  background-color: #333744;
  padding-top: 5px;
  font-size: 14px;
  line-height: 20px;
  color: white;
  text-align: center;
  border: none;
  letter-spacing: .2em;
  cursor: pointer;
}

</style>
